<template>
    <el-dialog class="assign-dialog" :model-value="assignDialog" width="480px" top="8vh" :draggable="true"
        :destroy-on-close="true" @close="onCancel" :close-on-click-modal="false" :align-center="true">
        <template #header>
            <h3 v-if="assignAny === 1">填写备注</h3>
            <h3 v-if="assignAny === 3"><span class="comple">完成</span>工单</h3>
            <h3 v-if="assignAny === 4"><span class="cancel">取消</span>工单</h3>
            <h3 v-if="assignAny === 5"><span v-if="isbatch">批量</span>催单</h3>
            <h3 v-if="assignAny === 8">工单归档</h3>
        </template>
        <div v-loading="onsaveloading" element-loading-text="加载中...">
            <div v-if="isbatch" class="list flex-align-center mb20">当前选中&nbsp;<span class="num">{{ selecttion.length
                    }}</span>&nbsp;个工单进行批量操作！
            </div>
            <el-alert v-if="assignAny === 7" class="alert" show-icon :closable="false" title="改派后，该工单不再属于原服务商"
                type="warning" />
            <el-form ref="formRef" :model="ruleForm" :rules="rules">
                <el-form-item v-if="assignAny === 1 || assignAny === 3 || assignAny === 4 || assignAny === 8"
                    label="处理备注">
                    <div class="notes">
                        <el-input v-model="ruleForm.note" maxlength="50" placeholder="请输入处理备注" show-word-limit
                            type="textarea" resize="none" />
                    </div>
                </el-form-item>
                <el-form-item v-if="assignAny === 5" label="催单内容">
                    <div class="notes">
                        <el-input v-model="ruleForm.content" maxlength="50" placeholder="请输入催单内容" show-word-limit
                            type="textarea" resize="none" />
                    </div>
                </el-form-item>
                <el-form-item :label="`工单图片(${fileList.length}/5)`" v-if="assignAny === 1">
                    <div class="upload_img">
                        <el-upload :auto-upload="false" list-type="picture-card" :on-preview="lookFile"
                            accept="image/*,.pdf" drag action="#" multiple :on-change="handleChange" :limit="5"
                            :on-exceed="onExceed" v-model:file-list="fileList">
                            <el-icon size="16">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button @click="onCancel" class="btn_cancel"> 取消 </el-button>
                <el-button color="#007cff" class="btn_save" @click="onSave">保存</el-button>
            </div>
        </div>
    </el-dialog>
    <!-- 文件查看 -->
    <el-dialog title="查看图片" v-model="dialogContract" :draggable="true">
        <img w-full style="height: 100%;width: 100%;" :src="file" />
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, toRefs, watch, reactive } from 'vue'
import { finishOrder, cancelOrder, saveReminder, saveRemark } from '../../../../api/order'
import { orderArchived } from '../../../../api/archived'
import { orderAnnexUpload } from '../../../../api/upload'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as  _ from 'lodash'
import type { UploadFile, UploadProps, FormInstance, FormRules } from 'element-plus'
const props = defineProps({
    assignAny: Number,
    assignDialog: Boolean,
    selecttion: Array,
    isbatch: Boolean,
    networkId: String,
    network: String,
    emp: String
})
const { assignAny, assignDialog, selecttion, isbatch, network, networkId, emp } = toRefs(props)
const emits = defineEmits(['assign-dialog', 'update-list'])
const loading = ref(false)
const onsaveloading = ref(false)
const customers = ref([])
const customersList = ref([])
const formRef = ref()
const networks = ref(null)
const dialogContract = ref(false)
const file = ref()
const ruleForm = reactive({
    note: '',//备注
    content: '',//催单内容
    dispatchRule: true,
})
const rules = reactive({
    empId: [{ required: true, message: '请选择客服人员！', trigger: ['blur', 'change'] }],
    website: [{ required: true, message: '请选择服务商！', trigger: ['blur', 'change'] }],
    note: [{ required: true, message: '请输入处理备注!', trigger: 'blur' }],
})
const fileList = ref([])
// 查看图片
const lookFile = (val) => {
    file.value = val.url || val
    dialogContract.value = true
}
const handleChange: UploadProps["onChange"] = (uploadFile: UploadFile, uploadFiles) => {
    fileList.value = uploadFiles
}
const onExceed = (val) => {
    ElMessage({
        showClose: true,
        message: `数量不能超过5张!`,
        type: 'error',
        duration: 3000,
    })
}
// 保存
const onSave = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let data = {
                "remark": ruleForm.note,
                "workIds": selecttion.value
            }
            switch (assignAny.value) {
                case 1:
                    onsaveloading.value = true

                    let dataRemark = {
                        "remark": ruleForm.note,
                        "workIds": selecttion.value,
                        annexs: []
                    } // 判断是否有图片
                    if (fileList.value?.length > 0) {
                        let imageList = []
                        imageList = fileList.value.map(o => {
                            return o.raw
                        })
                        await orderAnnexUpload(imageList).then(res => {
                            if (res.data.success) {
                                dataRemark.annexs = res.data.data.rows
                            } else {
                                ElMessage({
                                    message: res.data.message,
                                    type: 'error',
                                })
                                return
                            }
                        })
                    }
                    await saveRemark(dataRemark).then(res => {
                        ElMessage({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.success ? 'success' : 'error',
                            offset: 200,
                        })
                        if (res?.data.success) {
                            fileList.value = []
                            ruleForm.note = ''
                            emits('update-list')
                            onCancel()
                        }
                        onsaveloading.value = false
                    })
                    break;
                case 3:
                    onsaveloading.value = true
                    finishOrder(data).then(res => {
                        ElMessage({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.success ? 'success' : 'error',
                            offset: 200,
                        })
                        if (res?.data.success) {
                            ruleForm.note = ''
                            emits('update-list')
                            onCancel()
                        }
                        onsaveloading.value = false
                    })
                    break;
                case 4:
                    onsaveloading.value = true
                    cancelOrder(data).then(res => {
                        ElMessage({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.success ? 'success' : 'error',
                            offset: 200,
                        })
                        if (res?.data.success) {
                            ruleForm.note = ''
                            emits('update-list')
                            onCancel()
                        }
                        onsaveloading.value = false
                    })
                    break;
                case 5:
                    let data1 = {
                        "remark": ruleForm.content,
                        "workIds": selecttion.value
                    }
                    onsaveloading.value = true
                    saveReminder(data1).then(res => {
                        ElMessage({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.success ? 'success' : 'error',
                            offset: 200,
                        })
                        if (res?.data.success) {
                            ruleForm.content = ''
                            emits('update-list')
                            onCancel()
                        }
                        onsaveloading.value = false
                    })
                    break;

                // case 8:
                // orderArchived(data).then(res => {
                //     ElMessage({
                //         showClose: true,
                //         message: res.data.message,
                //         type: res.data.success ? 'success' : 'error',
                //         offset: 200,
                //     })
                //     if (res?.data.success) {
                //         ruleForm.note=''
                //         emits('update-list')
                //         onCancel()
                //     }
                //     onsaveloading.value = false
                // })
                // break;
                default:

                    break;
            }
        } else {
            return false
        }
    })
}
const onCancel = () => {
    formRef.value.resetFields()
    fileList.value = []
    emits('assign-dialog')
}
</script>
<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 16px;
    margin-top: 10px;

    :deep(.el-form-item__label) {
        font-size: 12px;

    }

    .notes {
        width: 100%;
        height: 100%;

        :deep(.el-textarea__inner) {
            font-size: 12px;
            height: 120px;
            border-radius: 2px;
        }
    }
}

:deep(.alert) {
    padding: 4px;
}

:deep(.inputread) {
    width: 182px;
}

.footer {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn_save {
        width: 60px;
    }

    .btn_cancel {
        width: 60px;

        &:hover {
            border: 1px solid #e5e5e5;
            color: #999;
            background-color: #e5e5e5;
        }
    }
}

.upload_img {
    width: 100%;

    :deep(.el-upload-list--picture-card) {
        display: flex;
        flex-wrap: wrap;
        // flex-direction: row-reverse;
        justify-content: left;

        .el-upload {
            width: 50px;
            height: 50px;
            margin: 8px 0 0 8px;
        }

        .el-upload-list__item {
            width: 50px;
            height: 50px;
            margin: 8px 0 0 8px;

            .el-upload-list__item-actions {
                font-size: 16px;

                &:hover {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }
        }
    }

    :deep(.el-upload-dragger) {
        padding: 0;
        height: 100%;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@import '../index.scss'
</style>